<template>
  <div class="citylist">
     <van-nav-bar
        title="城市列表"
        left-text="返回"
        
        left-arrow
        @click-left="$router.go(-1)"
        
        />
        <tab 
        :list="city"
        :height="h"
        :gl="{bgcolor:'pink',color:'green'}"
        :setopt="{index:'short',sel:'name'}"
        @egz='egz'
        />

  </div>
</template>

<script>
// 引入 插件
import tab from "../components/IndexTab.vue"
export default {
    data () {
        return {
            city:[],
            h:window.screen.height-46
        }
    },
    methods:{
        async init(){// 初始加载调用
        //    this.$axios.getCityList()// 获取城市列表
        //    .then(res=>{
        //        console.log(res);
        //    })

        //    this.$axios.getHot()// 热门城市
        //    .then(res=>{
        //        console.log(res);
        //    })
        //     // 当前城市 从本地存储获取
        //     // console.log(localStorage.getItem("cityinfo"));
        //     let cutcity=JSON.parse(localStorage.getItem("cityinfo"))
        //     console.log(cutcity);

             let citylist=await this.$axios.getCityList()// 城市列表
             citylist=citylist.data.msg
            //  console.log(citylist);
             let hot=await  this.$axios.getHot()// 热门
             hot=hot.data.msg
            //  console.log(hot);
             let cutcity=JSON.parse(localStorage.getItem("cityinfo"))// 本地存储的城市
             cutcity.short="#"
            //  cutcity=[cutcity]
            //  console.log(cutcity);

             // 把上面的数据合并
             this.city=[...citylist,...hot,cutcity]
             console.log(this.city);


        },
        egz(v){
            console.log(v);// 当前选项的信息 存到本地存储
            let {name,code}=v
            // 组合存储的对象
            let obj={name,code}
            console.log(obj);
            // 存储对象
            localStorage.setItem("cityinfo",JSON.stringify(obj))
            this.$router.go(-1)// 从哪来 回哪去
        }
        


    },
    mounted(){
        this.init()
    },
    components:{
        tab
    }
}
</script>

<style>

</style>